<template>
  <el-container class="layout-container">
    <el-header class="layout-header flex flex-items-center flex-justify-between border-b-1px border-b-#EAEAEA dark:border-#000 border-b-solid !bg-#fff !dark:bg-#222">
      <div class="w-30px flex flex-items-center">
        <KoiSvgIcon name="koi-mobile-menu" width="23" height="23" @click="mobileDrawer = true"></KoiSvgIcon>
      </div>
      <div class="max-w-155px h-45px">
        <!-- LOGO AND 标题 -->
        <el-image class="max-w-155px h-45px" :src="logoUrl" @click="handleHomePage">
          <template #error>
            <el-image
              class="max-w-155px h-45px"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-image>
          </template>
        </el-image>
      </div>
      <div class="flex flex-items-center">
        <!-- 明亮/暗黑模式图标 -->
        <KoiDark></KoiDark>
      </div>
    </el-header>
    <el-main class="layout-main !bg-#fffdf9 !dark:bg-#3A3A3A">
      <KoiMain class="p-x-12px"></KoiMain>
      <!-- Footer Begin -->
      <KoiFooter></KoiFooter>
      <!-- Footer End -->
    </el-main>
  </el-container>

  <!-- 左侧抽屉菜单 -->
  <KoiMobileDrawer style="width: 220px" v-model="mobileDrawer" placement="left" class="dark:bg-#37383A">
    <div>
      <el-scrollbar class="layout-scrollbar">
        <div class="flex flex-justify-center m-y-10px">
          <!-- LOGO AND 标题 -->
          <el-image class="max-w-155px h-45px" :src="logoUrl" @click="handleHomePage">
            <template #error>
              <el-image
                class="w-155px h-45px"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-image>
            </template>
          </el-image>
        </div>
        <!-- 菜单 -->
        <div class="rounded-4px m-5px p-6px dark:bg-[rgba(0,0,0,0.3)] bg-[rgba(0,0,0,0.03)]">
          <div class="m-y-5px" v-for="item in menuList" :key="item.path">
            <!-- 一级菜单 -->
            <div
              class="text-13px p-x-6px p-y-3px rounded line-clamp-1 flex flex-items-center text-left text-#222 dark:text-#E5E3F7"
              v-if="item.meta?.isHide == '1'"
              @click="handleMenuRouter(item)"
              :style="{ 'color': item.path == route.path ? 'var(--el-color-primary)' : '' }"
            >
              <div class="circle"></div>
              <KoiSvgIcon
                :name="item?.meta.icon"
                width="15"
                height="15"
                class="m-b-1px m-r-2px"
                v-if="item.meta.icon && item.meta.icon.indexOf(SVG_PREFIX) == 0"
              ></KoiSvgIcon>
              <el-icon v-if="item.meta.icon && item.meta.icon.indexOf(SVG_PREFIX) == -1" class="m-b-1px">
                <component :is="item.meta.icon"></component>
              </el-icon>
              <div>{{ getMenuLanguage(item.meta?.title)}}</div>
            </div>
            <!-- 二级菜单 -->
            <div class="m-t-6px flex flex-wrap" v-if="item?.children">
              <div
                class="text-13px p-6px rounded-6px line-clamp-1 bg-#FAFAFA rounded-4px dark:bg-[rgba(0,0,0,0.3)] border-1px border-solid border-[--el-border-color-light] text-#222 dark:text-#FFF m-2px flex flex-justify-center"
                v-for="child in item?.children"
                :key="child.path + new Date().getTime()"
                @click="handleMenuRouter(child)"
                v-if="item.meta?.isHide == '1'"
                :style="{ 'background': child.path == route.path ? '#f1f1f1' : '', 'color': child.path == route.path ? 'var(--el-color-primary)' : '' }"
                :class="[ child.path == route.path ? '!dark:bg-#000' : '' ]"
              >
                <KoiSvgIcon
                  width="15"
                  height="15"
                  :name="child?.meta.icon"
                  class="m-b-1px m-r-2px"
                  v-if="child.meta.icon && child.meta.icon.indexOf(SVG_PREFIX) == 0"
                ></KoiSvgIcon>
                <el-icon v-if="child.meta.icon && child.meta.icon.indexOf(SVG_PREFIX) == -1" class="m-b-1px m-r-2px">
                  <component :is="child.meta.icon"></component>
                </el-icon>
                <div>{{ getMenuLanguage(child.meta?.title) }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </KoiMobileDrawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import KoiMobileDrawer from "@/components/KoiMobileDrawer/Index.vue";
import KoiDark from "@/layouts/components/Header/components/Dark.vue";
import KoiMain from "@/layouts/components/Main/index.vue";
import KoiFooter from "@/layouts/components/Footer/index.vue";
import { useRoute, useRouter } from "vue-router";
import useAuthStore from "@/stores/modules/auth.ts";
import logoUrl from "@/assets/images/logo/logo.png";
import { SVG_PREFIX } from "@/config/index.ts";
import { koiMsgWarning } from "@/utils/koi.ts";
import { getMenuLanguage } from "@/utils/index.ts";
import { HOME_URL } from "@/config/index.ts";

const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const menuList = computed(() => authStore.showMenuList);
const mobileDrawer = ref(false);

/** 打开标签页 或 外部链接 */
const handleMenuRouter = (value: any) => {
  if (value.meta?.isLink) {
    if (/^https?:\/\//.test(value.meta?.isLink)) {
      return window.open(value.meta.isLink, "_blank");
    } else {
      koiMsgWarning("非正确链接地址，禁止跳转");
      return;
    }
  }
  router.push(value.path);
};

const handleHomePage = () => {
  router.push({ path: HOME_URL });
};
</script>

<style lang="scss" scoped>
.layout-container {
  width: 100vw;
  height: 100vh;
  .layout-header {
    height: $aside-header-height;
    overflow: hidden;
    background-color: var(--el-header-bg-color);
  }
  .layout-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--el-bg-color);
  }
}
.layout-scrollbar {
  width: 100%;
  height: calc(100vh - $aside-header-height);
}

.circle {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid var(--el-color-primary);
  border-radius: 1em;
  margin: 0 0.5em;
  vertical-align: 0.1em;
  display: inline-block;
}
</style>
